<template>
	<view>
		<template v-if="loadingFlag">
			<view class="loadingTxt">
				<loading></loading> 
			</view>
		</template>
		<template v-else>
			<template v-if="permissionFlag">
				<!-- 搜索 -->
				<view class="indexTop">
					<search :searchTxt="searchTxt" @goBack="goBack" @goSearch="goSearch" @delSearchTxt="delSearchTxt"/>
					<!-- <image class="yhqImg" src="../../static/images/yhqEntry.png" @tap="goYhqCen"></image> -->
					<!-- 咨询师filter -->
					<zxs-filter
						:fieldsArr="fieldsArr"
						:fieldsIndex="fieldsIndex"
						:sortArr="sortArr"
						:sortIndex="sortIndex"
						:isHasFixedFlag="isHasFixedFlag"
						@bindSortFilter="bindSortFilter"
						@bindFieldsFilter="bindFieldsFilter"
						@goFilter="goFilter" 
					></zxs-filter>
				</view>
				<!-- code={{code}}
				<view>-----</view>
				wxMpAppId={{wxMpAppId}}
				<view>------</view>
				openId = {{openId}}
				<view>------</view>
				<view>ogzWxAppId={{ogzWxAppId}}</view> -->
				<!-- 咨询师list -->
				<zxs-list :zxsList="zxsList" :loading="loading" :isHasDataFlag="isHasDataFlag" @goZxsDet="goZxsDet"></zxs-list>
				<!-- drawer filter -->
				<uni-drawer :visible="showRight" mode="right" :isHadFlDataFlag="true" @close="closeDrawer">
					<scroll-view class="scrollView" scroll-y>
						<view class="zxsFilter">
							<view class="zxsFilterItem">
								<view class="filterTit">性别</view> 
								<view class="filterList">
									<view class="item"
										:class="[sexIndex == index ? 'active' : '']"
										v-for="(item,index) in sexArr"
										:key="index"
										@tap="selectSex(index,item.id)"
									>{{item.name}}</view>
								</view>
							</view>
							<view class="zxsFilterItem hasMargTop">
								<view class="filterTit">服务师级别</view>
								<view class="filterList">
									<view class="item"
										:class="[fwsLevelIndex == index ? 'active' : '']"
										v-for="(item,index) in fwsLevelArr"
										:key="index"
										@tap="selectFwsLevel(index,item.val)"
									>{{item.name}}</view>
								</view>
							</view>
							<view class="zxsFilterItem">
								<view class="filterTit">擅长人群</view>
								<view class="filterList">
									<view class="item"
										:class="[personIndex == index ? 'active' : '']"
										v-for="(item,index) in personArr"
										:key="index"
										@tap="selectPersons(index,item.name)"
									>{{item.name}}</view>
								</view>
							</view>
							<view class="zxsFilterItem">
								<view class="filterTit">咨询风格</view>
								<view class="filterList">
									<view class="item"
										:class="[zxStyleIndex == index ? 'active' : '']"
										v-for="(item,index) in zxStyleArr"
										:key="index"
										@tap="selectZxStyle(index)"
									>{{item.name}}</view>
								</view> 
							</view>
							<view class="zxsFilterItem">
								<view class="filterTit">咨询流派</view>
								<view class="filterList">
									<view class="item"
										:class="[zxlpIndex == index ? 'active' : '']"
										v-for="(item,index) in zxlpArr"
										:key="index"
										@tap="selectZxLp(index)"
									>{{item.name}}</view>
								</view> 
							</view>
						</view>
						<view class="filterBtn">
							<view class="btn reset" @tap="resetFilter">重置</view>
							<view class="btn" @tap="sureFilter">确定</view>
						</view>
					</scroll-view>
				</uni-drawer>
			</template>
			<template v-else-if="permissionFlag == false">
				<sq-login-tips
					:tipsMsg="tipsMsg"
					bgColor="#eee" 
					innerBgColor="#fff5e6" 
					iconColor="#ffa510"
					textColor="#999"
				></sq-login-tips>
			</template>
		</template>
	</view>
</template>

<script>
	import Search from './components/Search'
	import ZxsFilter from './components/ZxsFilter'
	import ZxsList from './components/ZxsList'
	import SqLoginTips from '@/components/sq-login-tips'
	import { getZxsList,getFields,getPersons,getBannerList } from '@/api/xlzx/index'
	import { getWxAuthCode,getWxOgzInfo } from '@/api/wxsign/index.js'
	import getUrlCode from '@/mixins/getUrlCode.js'
	export default {
		components: {
			Search,
			ZxsFilter,
			ZxsList,
			SqLoginTips
		},
		mixins:[getUrlCode],
		data() {
			return {
				searchTxt:'请输入咨询师姓名',
				isHasFixedFlag:false,
				showRight: false,
				bannerList:[],
				sexArr:[{name:'不限',id:''},{name:'男',id:'男'},{name:'女',id:'女'}],
				sexIndex:0,
				sexVal:'',
				fieldsArr:[{lyName:'咨询领域',id:''}],
				fieldsIndex:0,
				fieldsVal:'',
				sortArr:[{name:'排序',id:''},{name:'服务次数',id:'st'},{name:'注册时间',id:'sd'}],
				sortIndex:0,
				sortVal:'',
				personArr:[{name:'全部',id:''}],
				personIndex:0,
				personVal:'',
				fwsLevelArr:[{name:'无',val:0},{name:'初级',val:1},{name:'中级',val:2},{name:'高级',val:3}],
				fwsLevelIndex:0,
				fwsLevlVal:0,
				zxStyleArr:[
					{name:'全部'},{name:'温暖'},{name:'抱持'},{name:'沉稳'},{name:'耐心'},{name:'温和而坚定'},{name:'温和而真诚'},
					{name:'深刻有力'},{name:'真实'},{name:'清晰'},{name:'简洁'},{name:'赋能'},{name:'富于创造性'},
					{name:'专业'},{name:'深入'}
				],
				zxStyleVal:'',
				zxStyleIndex:0,
				zxlpArr:[
					{name:'全部'},
					{name:'精神分析类'},
					{name:'行为疗法类'},
					{name:'人本主义类'},
					{name:'其他'}
				],
				zxlpIndex:0,
				zxlpVal:'',
				nowPage : 1,
				loading : false,
				isHasDataFlag:true,
				zxsList:[],
				isRefreshFlag:false,
				loadingFlag:true,
				permissionFlag:null,
				modName:'xlzx',
				ogzWxAppId:'',
				overDateFlag:null,
				wxAppId:'',
				tipsMsg:'',
				code:''
			}
		},
		onLoad(){
			this.getCode();
		},
		onShow(){
			if(this.isRefreshFlag){
				this.initParams();
			}
		},
		onHide(){
			this.isRefreshFlag = false;
		},
		onPullDownRefresh : function(){
			this.initParams();
			uni.stopPullDownRefresh();
		},
		onReachBottom : function(){
			if( !this.loading ){
				this.getZxsList(); 
			}
		},
		methods: {
			getCode() { // 非静默授权，第一次有弹框  静默授权的话，scope=snsapi_base
				//https://www.hxypss.cn/mp?ogzWxAppId=wx8970fbd4831f5b47
				var local = process.env.NODE_ENV == 'development' ? 'http://192.168.31.153:8080?ogzWxAppId=wx8970fbd4831f5b47' : window.location.href; //当前页面的地址（首页地址） 这个地址需要添加到公众号的一个设置里面去！！！
				this.ogzWxAppId = this.getUrlCode().ogzWxAppId;
				this.code = this.getUrlCode().code // 截取code
				uni.hideTabBar();
				// 判断地址栏参数有无code,如果没有code，页面地址就跳转到微信提供的获取code的链接
				if (this.code == null || this.code == '') {
					location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + this.wxMpAppId +
						"&redirect_uri=" +
						encodeURIComponent(local) + "&response_type=code&scope=snsapi_base&state="+ this.ogzWxAppId +"&connect_redirect=1#wechat_redirect"
				} else {
					this.wxAppId = this.getUrlCode().state;
					this.loadWxOgzInfo();
				}
			},
			loadWxOgzInfo(){
				let field = { wxAppId:this.ogzWxAppId };
				getWxOgzInfo(field).then(res=>{
					this.loadingFlag = false;
					let tmpRes = res.data.datas;
					setTimeout(()=>{
						uni.setNavigationBarTitle({
							title:tmpRes.ogzName
						})
					},200)
					if(tmpRes.modName.indexOf( this.modName ) >= 0){
						let currDate = this.util.getNowTimeDay();
						if(tmpRes.endDate >= currDate){
							uni.showTabBar();
							this.permissionFlag = true;
							uni.setStorageSync('mpOgzId',tmpRes.ogzId);
							uni.setStorageSync('mpOgzTel',tmpRes.lxMobile);
							this.loadFields();
							this.loadPersons();
							this.getZxsList();
						}else{
							this.failPermisson('该机构心理咨询模使用权限已过期');
						}
					}else{
						this.failPermisson('该机构尚未开通心理咨询模块权限');
					}
				}).catch(err=>{
					this.failPermisson('该机构尚未开通心理咨询模块权限');
					console.log(err);
				});
			},
			failPermisson(msg){
				this.loadingFlag = false;
				uni.hideTabBar();
				uni.removeStorageSync('mpOgzId');
				uni.removeStorageSync('mpOgzTel');
				this.tipsMsg = msg;
				this.permissionFlag = false;
			},
			goBack(){
				uni.navigateBack({
					delta:1
				})
			},
			goSearch(){ 
				uni.navigateTo({
					url:"../subIndex/search/search?searchType=zxsSearch"
				})
			},
			delSearchTxt(){
				this.searchTxt = '请输入咨询师姓名';
				this.initParams();
			},
			//获取咨询师list
			getZxsList(){
				let { nowPage,zxsList } = this;
				this.loading = true;
				var ogzId = uni.getStorageSync('mpOgzId');
				var realName = this.searchTxt == '请输入咨询师姓名' ? '' : this.searchTxt;
				var field = { ogzId,realName,sysRange:uni.getStorageSync('sysRange'),prov:"",city:"",sex:this.sexVal,
								serviceLevel:this.fwsLevlVal,scRange:this.fieldsVal,scCrowd:this.personVal,zxLevel:0,zxlp:this.zxlpVal,
								zxfg:this.zxStyleVal,sortTag:this.sortVal,page:this.nowPage,limit:this.limit };
				getZxsList(field).then(res=>{
					//console.log(res)
					nowPage += 1;
					zxsList.push( ...res.data.datas );
					this.zxsList = zxsList;
					this.nowPage = nowPage;
					this.loading = false;
					this.isHasDataFlag = true;
				}).catch(err=>{
					this.loading = false;
					this.isHasDataFlag=false;
					//console.log(err)
				})
			},
			initParams(){
				this.nowPage = 1;
				this.loading = false;
				this.zxsList = [];
				this.getZxsList();
			},
			onPageScroll(e){
				if(e.scrollTop >= 210){
					this.isHasFixedFlag = true;
				}else{
					this.isHasFixedFlag = false;
				}
			},
			//resetFilter
			resetFilter(){
				this.sexIndex = 0;
				this.sexVal = '';
				this.fwsLevlVal = 0;
				this.fwsLevelIndex = 0;
				this.personIndex = 0;
				this.personVal = '';
				this.zxStyleIndex = 0;
				this.zxStyleVal = '';
				this.zxlpIndex = 0;
				this.zxlpVal = '';
				this.showRight = false;
				this.initParams();
			},
			sureFilter(){
				this.showRight = false;
				this.initParams();
			},
			//选择性别
			selectSex(index,id){
				this.sexIndex = index;
				this.sexVal = id; 
			},
			//选择服务师级别
			selectFwsLevel(index,value){
				this.fwsLevelIndex = index;
				this.fwsLevlVal = value;
			},
			//选择咨询风格
			selectZxStyle(index){
				this.zxStyleIndex = index;
				this.zxStyleVal = this.zxStyleArr[index].name == '全部' ? '' : this.zxStyleArr[index].name;
			},
			//选择咨询流派
			selectZxLp(index){
				this.zxlpIndex = index;
				this.zxlpVal = this.zxlpArr[index].name == '全部' ? '' : this.zxlpArr[index].name;
			},
			//选择擅长人群
			selectPersons(index,id){
				this.personIndex = index;
				this.personVal = id == '全部' ? '' : id;
				//this.initParams();
			},
			//排序筛选
			bindSortFilter(index){
				this.sortIndex = index;
				this.sortVal = this.sortArr[index].id;
				this.initParams();
			},
			//擅长领域筛选
			bindFieldsFilter(index){
				this.fieldsIndex = index;
				this.fieldsVal = this.fieldsArr[index].id;
				this.initParams();
			},
			//加载领域
			loadFields(){
				var field = { parentId:0,showStatus:1 };
				getFields(field).then(res=>{
					var tmpData = res.data.datas;
					for(var i=0;i<tmpData.length;i++){
						this.fieldsArr.push(tmpData[i]);
					}
				}).catch(err=>{
					console.log(err)
				})
			},
			loadPersons(){
				var field = { showStatus:1 };
				getPersons(field).then(res=>{
					var tmpData = res.data.datas;
					for(var i=0;i<tmpData.length;i++){
						this.personArr.push(tmpData[i]);
					}
				}).catch(err=>{
					console.log(err)
				})
			},
			goTtService(){
				uni.navigateTo({
					url:'../subIndex/groupService/groupService'
				})
			},
			goXxOgz(){
				uni.navigateTo({
					url:'../subIndex/ogzList/ogzList'
				})
			},
			goFilter() {
				this.showRight = true;
			},
			closeDrawer() {
				this.showRight = false;
			},
			//跳转咨询师详情
			goZxsDet(id){
				uni.navigateTo({
					url:'../subIndex/zxsDet/zxsDet?userId=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.indexTop{
		position:sticky;
		left: 0;
		top: 0;
		z-index: 100;
		background: #fff;
		padding-top: 20rpx;
	}
	.scrollView{
		width: 100%;
		height: 100%;
	}
	.filterBtn{
		width: 100%;
		height:100rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #ffa510;
		display: flex;
		.btn{
			width: 50%;
			text-align: center;
			line-height: 100rpx;
			font-size: $font-size32;
			color: #fff;
			&.reset{
				background: #fff6e7;
				color: #ffa510;
			}
		}
	}
	.zxsFilter {
		padding:0 20rpx;
		overflow: hidden;
		background: #fff;
		overflow-y: auto;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 100rpx;
		.zxsFilterItem.hasMargTop{
			margin-top: -66rpx; 
		}
		.filterTit{
			font-size: $font-size32;
			color: $pss-text-color3;
			font-weight: bold;
			height: 80rpx;
			line-height: 80rpx;
		}
		.filterList{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.item{
				width: 32%;
				height: 66rpx;
				line-height: 66rpx; 
				border-radius: 50rpx;
				text-align: center;
				flex-shrink: 0;
				font-size: $font-size24;
				color: $pss-text-color8; 
				background: #f4f4f4;
				margin-bottom: 20rpx;
				&.active{
					color: #fff;
					background: #ffa510;
				}
			}
			&:after{
				content: '';
				display: block;
				width: 32%;
				height: 66rpx;
			}
		}
	}
	
	.zxServiceType {
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		.serviceItem {
			width: 288rpx;
			height: 145rpx;
			border-radius: 10rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 0 20rpx;
			position: relative;
			.typeImg{
				width: 108rpx;
				height: 88rpx;
				position: absolute;
				right: 20rpx;
				top: 30rpx;
			}
			.bigTit {
				font-size: 34rpx;
				font-weight: bold;
			}
			.smIntro {
				font-size: $font-size22;
				margin-top: 5rpx;
			}
	
			&.ttfw {
				background: #e5faf5;
				color: $pss-color-green;
			}
	
			&.xxjg {
				background: #fee4ff;
				color: #ca4cc9;
			}
		}
	}
</style>
